<!--20210304  zaq  创建vue文件-->
<!--20210310  zaq  实现具体界面-->
<!--20210324  zaq  user值由父组件传递，更新修改方法-->
<!--20210421  zaq  新增修改密码界面-->


<template>
<!--修改用户信息-->
<!--  注：用户名不可更改-->

  <div class="update_user">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!--  修改用户信息-->
      <el-tab-pane label="个人信息" name="first">
        <el-form ref="userRef" :model="user" label-width="100px">
        <el-form-item label="登录名">
          <el-input
              placeholder="登录名"
              v-model="user.uLogin"
              :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input
              placeholder="昵称"
              v-model="user.uName"
              clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="小星球">
          <el-input
              placeholder="小星球"
              v-model="user.uPlanet"
              clearable>
          </el-input>
        </el-form-item>
        <el-form-item label="创建日期">
          <el-input
              placeholder="创建日期"
              v-model="user.uCreatedate"
              :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
              v-model="user.uBirthday"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="user.uSex">
            <el-radio-button label="男"></el-radio-button>
            <el-radio-button label="女"></el-radio-button>
            <el-radio-button label="保密"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="user.uStatus"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button  @click="update_user(user)">保存修改</el-button>
          <el-button @click="old_user(userRef)">取消</el-button>
        </el-form-item>
      </el-form>
      </el-tab-pane>

<!--      修改密码-->
      <el-tab-pane label="修改密码" name="second">
        <update-pwd></update-pwd>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import update_pwd from "@/components/user/Update_pwd";

export default {
  name: "Update_user",
  components:{
    'update-pwd':update_pwd,//修改密码
  },
  props:{
    user:{
      type:Object,
      required:true
    },

  },
  data(){
    return{
      activeName:'first',
      userRef:'',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },//生日选择

      // user:{
      //   u_id:'1',//用户id
      //   u_login:'admin',//用户名
      //   u_name:'admin',//用户昵称
      //   u_pwd:'',//密码
      //   u_planet:'一颗大傻蛋',//小星球名字
      //   u_createdate:'2021-02-07',//用户创建日期
      //   u_birthday:'1999-09-24',//生日
      //   u_sex:'保密',//性别
      //   u_status:'人就是要吃饭',//个性签名
      //   u_admin:'',//管理员标志
      //   delete:''//删除标志
      // }//用户信息
    }

  },
  methods:{
    update_user(form){
      console.log(form)
      //传递给后端更新用户信息

      //成功后前端进行同步
      this.$emit('updateUser',form)
      this.$message({
        message: '修改成功',
        type: 'success'
      })
    },//修改用户信息

    old_user(oldUser){
      if(this.$refs[oldUser] != undefined){
        this.$refs[oldUser].resetFields();
      }
      else{
        this.$message.error('重置失败');
      }
    },//取消修改，还原用户信息
  },
  mounted() {
  },//初始化
}
</script>

<style scoped>
.update_user{
  text-align: left;
  width: 500px;
}
</style>